<template>
  <IconifyIcon :icon="iconName" :class="svgClass" v-if="!isExternalIcon">
  </IconifyIcon>
  <div
    v-else
    :style="styleExternalIcon"
    :class="svgClass"
    bg-current
    v-bind="$attrs"
  ></div>
</template>

<script setup lang="ts">
import { isExternal } from "@/utils/valiate"
import { Icon as IconifyIcon } from "@iconify/vue"

// const { iconName, customClass } = withDefaults(
//   defineProps<{
//     iconName: string
//     customClass: string
//   }>(),
//   {
//     iconName: "",
//     customClass: ""
//   }
// )
const { iconName, customClass } = defineProps<{
  iconName: string
  customClass?: string
}>()

const isExternalIcon = isExternal(iconName)
const styleExternalIcon = computed(() => ({
  mask: `url(${iconName}) no-repeat 50% 50%`,
  "-webkit-mask": `url(${iconName}) no-repeat 50% 50%`,
  "mask-size": "cover"
}))
const svgClass = computed(() => (customClass ? `icon ${customClass}` : "icon"))
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}
</style>
